<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
        .Red {
            color: red;
        }
    </style>
</head>

<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="3%" valign="top">a)</td>
            <td colspan="2" valign="top" id="tdNewAdver">
                <input type="radio" id="radioNewAdver" name="radiobutton" value="newAdver">
                New Advertiser</td>
            <td width="69%" valign="top">Different rates appears in (e) depending on which 
      is selected</td>
            <td width="2%" colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top" id="tdExeAdver">
                <input type="radio" id="radioExeAdver" name="radiobutton" value="ExeAdver">
                Existing Advertiser</td>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">b)</td>
            <td colspan="2" valign="top">Month: 
      <select name="monthSelect" id="monthSelect">
          <option>--please select month--</option>
          <option value="jan">January</option>
          <option value="feb">February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
      </select></td>
            <td valign="top">Different notes drop down to appear for each month (as selected)</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">Month Selected Notes:</td>
            <td valign="top" id="tdMonthNotes">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">c)</td>
            <td colspan="2" valign="top">Package size:</td>
            <td valign="top">
                <select name="packageSelect" id="packageSelect">
                    <option value="0">--please select month--</option>
                    <option value="10K">10K</option>
                    <option value="20K">20K</option>
                </select></td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">Slider or Dropdown list</td>
            <td valign="top">(users select from 10K, 20K, 30K, 40K, 50K, 60K, 70K, 80K 
      packages) </td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">d)</td>
            <td colspan="2" valign="top">enter promo code (optional): 
      <input type="text" id="txtPromoCode" name="txtPromoCode"></td>
            <td valign="top">affects (e) if user has discount code</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">e)</td>
            <td colspan="2" valign="top">package price: 
      <input type="text" readonly="readonly" id="txtPkgPrice" name="txtPkgPrice"></td>
            <td valign="top">this field is automatically filled depending on package selected 
      in c) in from a list of preset package prices (must be editable in code 
      at anytime) i.e. 10K = 100.00, 20K = 200.00, 30K= &pound;300.00, 40K=&pound;400.00, 
      50K=&pound;500.00, 60K=&pound;600.00, 70K=&pound;700.00, 80K=&pound;800.00</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">f)</td>
            <td colspan="2" valign="top">average value of an order: 
      <input type="text" name="txtAverageOrder" id="txtAverageOrder"></td>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">g)</td>
            <td colspan="2" valign="top">expected response rate (%): 
      <input name="txtResponseRate" id="txtResponseRate" type="text" value="8"></td>
            <td valign="top">preset to 8%- but make editable by code and obviously user 
      can enter their own figure/ percentage</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>
        <tr>
            <td valign="top">&nbsp;</td>
            <td colspan="2" valign="top">&nbsp;</td>
            <td valign="top">
                <input type="submit" id="btnSubmit" name="btnSubmit" value="Calculate">
                <input type="button" value="New Calculation" id="btnReset">
            </td>
            <td colspan="2" valign="top">&nbsp;</td>
        </tr>

    </table>
    <table>
        <tr>
            <td id="divOutput"></td>
        </tr>
    </table>
    <br>
    <br>
    There should be a form checker to ensure all fields are complete and no letters 
or wrong inputs. 

    
     <script type="text/javascript">
         // Here goes all the programming logic for js
         var promocodes = {
             "10K": {
                 "BN2333": 80.00,
                 "BN2334": 90.00,
                 "BN2335": 35.00,
                 "BN2336": 29.35,
                 "BN2337": 75.95
             },
             "20K": {
                 "BN2410": 80.00,
                 "BN2411": 90.00,
                 "BN2412": 35.00,
                 "BN2413": 29.35,
                 "BN2414": 75.95
             }
         };

         var monthNotes = {
             "jan": {
                 "Name": "Jan",
                 "DeliveryDate": "January",
                 "Capacity": 9898
             },
             "feb": {
                 "Name": "Feb",
                 "DeliveryDate": "February",
                 "Capacity": 9898
             },
         }

         var packagePrices = {
             "new": {
                 "10K": 100.00,
                 "20K": 200.00
             },
             "existing": {
                 "10K": 145.00,
                 "20K": 237.00
             }
         };


         function discountCalulation() {
             //Discount Calculation
             var txtPromoCode = document.getElementById("txtPromoCode").value;

             var packageSelectdropdownlist = document.getElementById("packageSelect");
             if (!packageSelectdropdownlist) return;
             if (packageSelectdropdownlist.selectedIndex == 0) return;



             if (txtPromoCode.trim() != "") {
                 var index = !packageSelectdropdownlist.value ? "10K" : packageSelectdropdownlist.value;
                 var codes = promocodes[index];
             }
         }
         function monthSelect_dropDownChange() {
             var monthdropdownlist = document.getElementById("monthSelect");
             if (monthdropdownlist.selectedIndex == 0)
                 return;
             if (!monthdropdownlist) return;

             var tdOutput = document.getElementById("tdMonthNotes");
             var index = !monthdropdownlist.value ? "jan" : monthdropdownlist.value;
             var output = monthNotes[index].Name + " is here <br/> Delivery Date: " +
                            monthNotes[index].DeliveryDate + "<br/>" +
                            monthNotes[index].Name + " Capacity is: " +
                            monthNotes[index].Capacity;
             tdOutput.innerHTML = output;
         }
         function packageSelect_dropDownChange() {
             var packageSelectdropdownlist = document.getElementById("packageSelect");
             if (!packageSelectdropdownlist) return;
             if (packageSelectdropdownlist.selectedIndex == 0) return;





             var radioAdver = document.getElementById("radioNewAdver").checked ? "new" : "existing";
             var advertPricing = packagePrices[radioAdver];
             document.getElementById("txtPkgPrice").value = advertPricing[packageSelectdropdownlist.value];

         }


         function resultCalculate() {




             var packageSelectdropdownlist = document.getElementById("packageSelect");
             if (!packageSelectdropdownlist) return;

             var packageSize = packageSelectdropdownlist.value;
             if (!packageSize || packageSize == "") return;

             var packagePrice = document.getElementById("txtPkgPrice").value;
             if (!packagePrice || packagePrice == "") return;

             var averageOrder = document.getElementById("txtAverageOrder").value; //f
             var responseRate = document.getElementById("txtResponseRate").value; //g

             packageSize = parseInt(packageSize) * 1000; //c
             packagePrice = parseInt(packagePrice); //e


             var divout = document.getElementById("divOutput");
             //divout.innerHTML = "test";
             divout.innerHTML += "<br/><b> 1) cost to reach each customer:</b>   " + (packagePrice / packageSize);
             divout.innerHTML += "<br/><b> 2) cost to reach per 1000:</b>   " + (packagePrice / (packageSize / 1000));
             var expectedresponse = ((responseRate * packageSize) / 100.0);
             divout.innerHTML += "<br/><b> 3) No of sales on expected response:</b>   " + expectedresponse;

             divout.innerHTML += "<br/><b> 4) Total value of returns of sales:</b>   " + expectedresponse * parseInt(averageOrder);
             var roPeople = packagePrice / parseInt(averageOrder);
             divout.innerHTML += "<br/><b> 5) Return- no of people needed to cover cost :</b>   " + roPeople;
             divout.innerHTML += "<br/><b> 6) Return (%) number of people :</b>   " + (roPeople / parseInt(averageOrder)) * 100;
             divout.innerHTML += "<br/><b> 7) Return on Investment for your campaign is% :</b>   " + (roPeople / parseInt(averageOrder)) * 100;

         }
         function validation() {
             var radioAdvertiser = document.getElementById("radioNewAdver").checked || document.getElementById("radioExeAdver").checked;
             if (!radioAdvertiser) {
                 document.getElementById("tdExeAdver").className = "Red";
                 document.getElementById("tdNewAdver").className = "Red";
                 return;
             }
             else {
                 document.getElementById("tdExeAdver").className = "";
                 document.getElementById("tdNewAdver").className = "";
             }

             var packageSelect = document.getElementById("packageSelect")
             if (packageSelect.selectedIndex == 0) {
                 document.getElementById("packageSelect").className = "Red";
             }
             else {
                 document.getElementById("packageSelect").className = "";
             }

             var txtAverageOrder = document.getElementById("txtAverageOrder");
             if (txtAverageOrder.value.trim() == "") {
                 txtAverageOrder.className = "Red";
                 txtAverageOrder.focus();
                 return false;
             }
             else {
                 txtAverageOrder.className = "";
             }
             return true;
         }
         function btnSubmit_Click() {
             if (!validation()) return;
             resultCalculate();
         };

         document.getElementById("btnReset").onclick = function () {
             var inputelem = document.getElementsByTagName("input");
             for (var i = 0; i < inputelem.length; i++) {
                 if (inputelem[i].type == "text")
                     inputelem[i].value = "";
             }
             document.getElementById("txtResponseRate").value = "8";
         }

         //Intializing stuff
         document.getElementById("monthSelect").onchange = monthSelect_dropDownChange;
         document.getElementById("packageSelect").onchange = packageSelect_dropDownChange;
         document.getElementById("btnSubmit").onclick = btnSubmit_Click;
         document.getElementById("txtPromoCode").onblur = discountCalulation;

     </script>
</body>
</html>
